<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录调试工具</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #42b983;
            margin-bottom: 20px;
        }
        form {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            background: #42b983;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background: #35495e;
        }
        #console {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 8px;
            height: 400px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
        }
        .log-info { color: #3498db; }
        .log-error { color: #e74c3c; }
        .log-success { color: #2ecc71; }
    </style>
</head>
<body>
    <h1>登录调试工具</h1>
    
    <form id="loginForm">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" value="admin" required>
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" value="abc@123456" required>
        </div>
        <button type="submit">登录并查看调试日志</button>
    </form>
    
    <h2>浏览器控制台日志 (按F12可查看完整日志):</h2>
    <div id="console"></div>
    
    <script>
        // 捕获控制台日志
        const consoleDiv = document.getElementById('console');
        const originalConsoleLog = console.log;
        const originalConsoleError = console.error;
        const originalConsoleWarn = console.warn;
        
        // 重写控制台方法，同时显示在页面上
        console.log = function(...args) {
            originalConsoleLog.apply(console, args);
            appendToConsole('info', args);
        };
        
        console.error = function(...args) {
            originalConsoleError.apply(console, args);
            appendToConsole('error', args);
        };
        
        console.warn = function(...args) {
            originalConsoleWarn.apply(console, args);
            appendToConsole('warn', args);
        };
        
        function appendToConsole(type, args) {
            const logLine = document.createElement('div');
            logLine.className = 'log-' + type;
            
            // 格式化参数为字符串
            const message = args.map(arg => {
                if (arg === null) return 'null';
                if (arg === undefined) return 'undefined';
                if (typeof arg === 'object') {
                    try {
                        return JSON.stringify(arg, null, 2);
                    } catch (e) {
                        return String(arg);
                    }
                }
                return String(arg);
            }).join(' ');
            
            logLine.textContent = message;
            consoleDiv.appendChild(logLine);
            consoleDiv.scrollTop = consoleDiv.scrollHeight;
        }
        
        // 登录表单提交处理
        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            console.log('开始测试登录...');
            console.log('用户名:', username);
            
            try {
                const params = new URLSearchParams();
                params.append('username', username);
                params.append('password', password);
                
                console.log('准备发送登录请求到 /api/auth/token');
                
                const response = await fetch('/api/auth/token', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: params
                });
                
                console.log('登录请求响应状态:', response.status);
                
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
                }
                
                const data = await response.json();
                console.log('登录响应数据:', data);
                console.log('登录响应数据类型:', typeof data);
                if (typeof data === 'object') {
                    console.log('登录响应包含的字段:', Object.keys(data));
                    console.log('是否包含access_token:', 'access_token' in data);
                    console.log('是否包含user:', 'user' in data);
                }
                
                console.log('直接登录测试成功! 这表明API本身是正常的。');
                console.log('如果Vue应用中登录失败，请检查前端代码中的请求处理逻辑。');
                
            } catch (error) {
                console.error('登录测试失败:', error);
            }
        });
        
        // 页面加载时添加说明
        console.log('=== 登录调试工具 ===');
        console.log('1. 点击"登录并查看调试日志"按钮测试登录API');
        console.log('2. 查看下方日志区域或按F12打开浏览器控制台查看完整日志');
        console.log('3. 如果直接登录测试成功但Vue应用中登录失败，问题可能在前端代码的请求处理逻辑');
    </script>
</body>
</html>